import 'package:flutter/material.dart';
import 'package:flutter_dark_mode_getx_demo/theme/app_theme_manager.dart';

import '../theme/app_theme_modes.dart';
import '../theme/theme_colors.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          PopupMenuButton(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
            offset: const Offset(0, 15),
            elevation: 10,
            tooltip: "切换模式",
            position: PopupMenuPosition.under,
            padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
            initialValue: AppThemeManager.getLocalAppThemeMode(),
            itemBuilder: (BuildContext context) =>
            <PopupMenuEntry<AppThemeMode>>[
              PopupMenuItem<AppThemeMode>(
                  value: AppThemeMode.light, child: Text(AppThemeMode.light.name)),
              PopupMenuItem<AppThemeMode>(
                  value: AppThemeMode.dark, child: Text(AppThemeMode.dark.name)),
              // PopupMenuItem<AppThemeMode>(
              //     value: AppThemeMode.system, child: Text(AppThemeMode.system.name)),
            ],
            onSelected: (mode) => AppThemeManager.changeMode(mode),
            // icon: Icon(Icons.abc),
            child: Icon(Icons.more_vert_rounded,color: AppThemeColor.title.value,size: 20,),
          ),
        ],
        backgroundColor: AppThemeColor.bg.value,
      ),
      body: Container(
        width: double.infinity,
        color: AppThemeColor.bg.value,
        child: DecoratedBox(
          decoration: BoxDecoration(
            color: AppThemeColor.bg.value,
          ),
          child: SizedBox.expand(
            child: SingleChildScrollView(
              primary: true,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const SizedBox(height: 25,),
                  const Text(
                    'You have pushed the button this many times:',
                  ),
                  Text(
                    '$_counter',
                    style: Theme.of(context).textTheme.headlineMedium,
                  ),
                  paddingTopWidget(
                      child: Text(
                        "Title",
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 22,
                            color: AppThemeColor.title.value
                        ),
                      )
                  ),
                  paddingTopWidget(
                      child: Text(
                        "Primary Text",
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 20,
                            color: AppThemeColor.primaryText.value
                        ),
                      )
                  ),
                  paddingTopWidget(
                      child: Text(
                        "Second Text",
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 18,
                            color: AppThemeColor.secondText.value
                        ),
                      )
                  ),
                  paddingTopWidget(
                      child: Text(
                        "Disable Text",
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 18,
                            color: AppThemeColor.disable.value
                        ),
                      )
                  ),
                  Divider(
                    color: AppThemeColor.divide.value,
                    indent: 25,
                    endIndent: 25,
                  ),
                  Container(
                    margin: const EdgeInsets.symmetric(horizontal: 25),
                    height: 85,
                    decoration: BoxDecoration(
                      color: AppThemeColor.cellBg.value,
                      borderRadius: BorderRadius.circular(15),
                    ),
                    child: Center(
                      child:  Text(
                        "Cell Bg",
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 18,
                            color: AppThemeColor.disable.value
                        ),
                      ),
                    ),
                  ),
                  paddingTopWidget(
                    child: Row(
                      children: [
                        const SizedBox(width: 25,),
                        Expanded(
                          flex: 1,
                          child:  Container(
                            height: 55,
                            decoration: BoxDecoration(
                              color: AppThemeColor.red.value,
                              borderRadius: BorderRadius.circular(15),
                            ),
                            child: const Center(
                              child: Text(
                                "Red",
                                style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                    fontSize: 18,
                                    color: Colors.white
                                ),
                              ),
                            ),
                          ),
                        ),
                        const SizedBox(width: 25,),
                        Expanded(
                          flex: 1,
                          child:  Container(
                            height: 55,
                            decoration: BoxDecoration(
                              color: AppThemeColor.blue.value,
                              borderRadius: BorderRadius.circular(15),
                            ),
                            child: const Center(
                              child:  Text(
                                "Blue",
                                style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                    fontSize: 18,
                                    color: Colors.white
                                ),
                              ),
                            ),
                          ),
                        ),
                        const SizedBox(width: 25,),
                      ],
                    )
                  )
                ],
              ),
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }

  Widget paddingTopWidget({required Widget child}) {
    return Padding(
      padding: const EdgeInsets.only(top: 10),
      child: child,
    );
  }
}
